  <!-- <div>
    <h1>3333抵扣管理</h1>
  </div> -->
<template>
  <div id="dkgl">
    <!-- 查询筛选 -->
    <div id="cx_sxcx">
      <div id="cx_sxcx_header" class="clear">
        <div>筛选查询</div>
        <div id="sq" @click="sq">收起 ∧ </div>
        <div id="zk" @click="zk" class="yc">展开 ∨ </div>
      </div>
      <div id="cx_sxcx_content" class="clear">
        <div>
          <label for="">标题关键词</label>
          <el-input v-model="searchFrom.dkbt" placeholder="请输入内容"></el-input>
        </div>
        <div>
          <label for="">状态</label>
          <el-select v-model="searchFrom.sfsj" placeholder="请选择">
            <el-option v-for="(item,i) in options" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <label for="">行程类型</label>
          <el-select v-model="searchFrom.syxc" placeholder="请选择">
            <el-option v-for="(item,i) in options_2" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- <div class="block">
          <label for="" class="demonstration">添加时间</label>
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="searchFrom.tjsj" type="datetime" placeholder="请选择时间">
          </el-date-picker>
        </div> -->
      </div>
      <div id="cx_sxcx_footer">
        <button @click="cz">重置</button>
        <button @click="sx">筛选</button>
      </div>
    </div>
    <!-- 数据列表 -->
    <div id="cx_sjlb">
      <div id="cx_sjlb_header" class="clear">
        <div>数据列表</div>
        <div id="cx_sjlb_header_right" class="clear">
          <!-- <div>
            <label for="">排序方式</label>
            <select name="" id="">
              <option value="">全部</option>
              <option value="">按时间顺序</option>
              <option value="">按时间倒序</option>
            </select>
          </div> -->
          <!-- <div>
            <label for="">批量操作</label>
            <select name="" id="">
              <option value="">全部</option>
              <option value="">可删除</option>
            </select>
          </div> -->
          <el-button type="button" @click="tjtk = true">添加</el-button>
        </div>
      </div>
      <div id="cx_sjlb_content">
        <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: 'id', order: 'ascendant'}">
          <!-- <el-table-column type="selection" width="auto" min-width="3%">
          </el-table-column> -->
          <el-table-column prop="id" label="ID" width="auto" min-width="5%">
          </el-table-column>
          <el-table-column prop="dkbt" label="抵扣标题" width="auto" min-width="9%" sortable>
          </el-table-column>
          <el-table-column prop="dkbz" label="抵扣标准" width="auto" min-width="20%" sortable>
          </el-table-column>
          <el-table-column prop="syxc" label="使用行程" width="auto" min-width="18%" sortable>
          </el-table-column>
          <el-table-column prop="sfsj" label="是否上架" width="auto" min-width="11%" sortable>
            <template slot-scope="scope">
              <el-switch active-color="#409EFF" inactive-color="#C0CCDA" v-model="scope.row.sfsj" @change="dkglsfsj(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="添加日期" width="auto" min-width="14%" sortable>
            <template slot-scope="scope">{{ scope.row.tjsj }}</template>
          </el-table-column>
          <el-table-column label="操作" width="auto" min-width="10%">
            <div slot-scope="scope">
              <el-button type="text" size="small" @click="bjtkData(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="sctk(scope.row)">删除</el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div id="cx_sjlb_footer">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="dkglData.length" :page-size='5' :current-page.sync="nowPage">
          </el-pagination>
        </div>
        <!-- <el-pagination background layout="prev, pager, next" :total="dkglData.length" :page-size="nowNum" :current-page.sync="nowPage">
        </el-pagination> -->
      </div>
    </div>
    <!-- 添加弹框 -->
    <div id="tk_tj">
      <el-dialog title="添加抵扣" :visible.sync="tjtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="抵扣标题" prop="dkbt">
            <el-input v-model="ruleForm.dkbt"></el-input>
          </el-form-item>
          <el-form-item label="抵扣备注" prop="dkbz">
            <el-input v-model="ruleForm.dkbz"></el-input>
          </el-form-item>
          <el-form-item label="使用行程" prop="syxc">
            <el-radio-group v-model="ruleForm.syxc">
              <el-radio label="徒步"></el-radio>
              <el-radio label="跑步"></el-radio>
              <el-radio label="骑行"></el-radio>
              <el-radio label="自驾"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上架" prop="sfsj">
            <el-switch v-model="ruleForm.sfsj"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dktj('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 编辑弹框 -->
    <div id="tk_bj">
      <el-dialog title="编辑抵扣" :visible.sync="bjtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="抵扣标题" prop="dkbt">
            <el-input v-model="ruleForm.dkbt"></el-input>
          </el-form-item>
          <el-form-item label="抵扣备注" prop="dkbz">
            <el-input v-model="ruleForm.dkbz"></el-input>
          </el-form-item>
          <el-form-item label="使用行程" prop="syxc">
            <el-radio-group v-model="ruleForm.syxc">
              <el-radio label="徒步"></el-radio>
              <el-radio label="跑步"></el-radio>
              <el-radio label="骑行"></el-radio>
              <el-radio label="自驾"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上架" prop="sfsj">
            <el-switch v-model="ruleForm.sfsj"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dkbj">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style lang="less" scoped>
/* * {
  padding: 0;
  margin: 0;
} */
.clear::after {
  content: "";
  display: block;
  clear: both;
}
.yc {
  display: none;
}
#sq,
#zk {
  cursor: pointer;
}
#sq:hover,
#zk:hover {
  color: #409eff;
}
/* #dkgl {
  background-color: rgb(250, 250, 250);
  font-size: 12px;
} */
#dkgl > div {
  border: 1px solid #dcdfe6;
  font-size: 15px;
}
#dkgl button {
  cursor: pointer;
}
#cx_sxcx > div {
  padding: 15px;
}
#cx_sxcx_header {
  background-color: rgb(242, 242, 242);
}
#cx_sxcx_header > div:nth-child(1) {
  float: left;
}
#cx_sxcx_header > :not(div:nth-child(1)) {
  float: right;
  margin-right: 40px;
}
#cx_sxcx_content > div {
  float: left;
  width: 30%;
}
#cx_sxcx_content > div:nth-child(2) {
  margin: 0 5%;
}
#cx_sxcx_content > div > :nth-last-child(1) {
  padding: 5px;
  width: 50%;
  margin-left: 15px;
}
#cx_sxcx_footer > button {
  padding: 10px 40px;
  border: none;
  color: white;
  background-color: rgb(102, 102, 102);
  border-radius: 5px;
}
#cx_sxcx_footer > button:nth-child(1) {
  background-color: rgb(204, 204, 204);
  margin: 0 5% 0 30%;
}
#cx_sjlb {
  background: rgb(242, 242, 242);
  margin-top: 10px;
}
#cx_sjlb > div {
  padding: 15px;
}
#cx_sjlb_header > div:nth-child(1) {
  float: left;
}
#cx_sjlb_header_right {
  float: right;
}
#cx_sjlb_header_right > div {
  float: left;
}
#cx_sjlb_header_right > div:nth-child(2) {
  margin: 0 10px;
}
#cx_sjlb_header_right > div > select {
  margin: 0 10px;
  padding: 6px;
  border: none;
  border-radius: 5px;
  width: 120px;
}
#cx_sjlb_header_right > button {
  background: white;
  border: 1px solid rgb(204, 204, 204);
  padding: 5px 30px;
}
/deep/ .el-table .cell,
/deep/ .el-table--border .el-table__cell:first-child .cell,
/deep/ .el-pagination {
  text-align: center;
}
</style>

<script>
export default {
  data() {
    return {
      options: [{/* 筛选查询，状态选择 */
        value: '全部',
        label: ''
      }, {
        value: '上架',
        label: ''
      }, {
        value: '下架',
        label: ''
      }],
      searchFrom: {/* 筛选查询，临时表单 */
        dkbt: '',
        sfsj: '全部',
        syxc: '全部'
      },
      value: '',
      options_2: [{/* 筛选查询，行程列表选择 */
        value: '全部',
        label: ''
      }, {
        value: '徒步',
        label: ''
      }, {
        value: '跑步',
        label: ''
      }, {
        value: '骑行',
        label: ''
      }, {
        value: '自驾',
        label: ''
      }, {
        value: '其他',
        label: ''
      }],
      input: '',/* 筛选查询，输入框 */
      dkglData: [],
      nowPage: 1,/* 当前页 */
      eachNum: '每页5条',
      nowNum: 5,/* 每页显示几条数据 */
      tjtk: false,/* 添加弹框默认隐藏false */
      bjtk: false,/* 编辑弹框默认隐藏false */
      ruleForm: {/* 添加编辑，临时表单 */
        dkbt: '',
        dkbz: '',
        syxc: '',
        sfsj: false,
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.eachNum = `每页 ${val} 条`
      this.nowNum = val
      return
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    },
    sq() {/* 筛选收起 */
      document.querySelector("#cx_sxcx_content").classList.add('yc')
      document.querySelector("#cx_sxcx_footer").classList.add('yc')
      document.querySelector("#sq").classList.add('yc')
      document.querySelector("#zk").classList.remove('yc')
    },
    zk() {/* 筛选展开 */
      document.querySelector("#cx_sxcx_content").classList.remove('yc')
      document.querySelector("#cx_sxcx_footer").classList.remove('yc')
      document.querySelector("#sq").classList.remove('yc')
      document.querySelector("#zk").classList.add('yc')
    },
    getalldkgl(data = {}) {/* 刷新所有数据 */
      this.$axios({
        url: '/promotion/getalldkgl',
        method: 'get',
        params: data
      }).then((res) => {
        let data = res.data.data;
        data.filter((v) => {
          v.tjsj = this.dateFn(v.tjsj);
          if (v.sfsj == '是') {
            v.sfsj = true;
          } else {
            v.sfsj = false;
          };
        });
        this.dkglData = data;
        this.ruleForm = {
          dkbt: '',
          dkbz: '',
          syxc: '',
          sfsj: false,
        }
      })
    },
    dkglsfsj(val) {/* 是否上架滑动开关 */
      if (val.sfsj) {
        val.sfsj = '是'
      } else {
        val.sfsj = '否'
      }
      // console.log(val);
      this.$axios({
        url: '/promotion/dkglsfsj',
        method: 'post',
        data: val
      }).then(() => {
        if (val.sfsj == '是') {
          this.$message({
            message: '上架成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '下架成功',
            type: 'warning'
          });
        }
        this.getalldkgl()
      })
    },
    sctk(data) {/* 删除提示弹框 */
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    del(data) {/* 数据删除方法 */
      this.$axios({
        url: '/promotion/dkglsc',
        method: 'post',
        data: data
      }).then(() => {
        this.getalldkgl();
      })
    },
    dktj(formName) {/* 添加弹框 */
      if (this.ruleForm.sfsj) {
        this.ruleForm.sfsj = '是'
      } else {
        this.ruleForm.sfsj = '否';
      }
      this.$axios({
        url: '/promotion/dkgltj',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.tjtk = false;
        this.getalldkgl();
      })
    },
    tkgb(done) {/* 弹框关闭提示 */
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    labelPosition() {/* 添加弹框中的el-form */

    },
    bjtkData(data) {/* 编辑弹框数据传递 */
      this.bjtk = true;
      this.ruleForm = { ...data };
    },
    dkbj(res) {/* 确认编辑 */
      this.$axios({
        url: '/promotion/dkglbj',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.bjtk = false;
        this.getalldkgl();
      })
    },
    sx() {/* 筛选 */
      let from = { ...this.searchFrom };
      if (from.sfsj == '上架') {
        from.sfsj = '是';
      } else if (from.sfsj == '下架') {
        from.sfsj = '否'
      }
      this.getalldkgl(from);
    },
    cz() {/* 重置 */
      this.searchFrom = {
        dkbt: '',
        sfsj: '全部',
        syxc: '全部'
      }
      this.getalldkgl();
    },
    dateFn(daytime) {/* 时间格式修改 */
      daytime = daytime.replace(/.000Z/g, " ");
      daytime = daytime.split("T");
      let day = daytime[0];
      let time = daytime[1].split(":");
      time = `${parseInt(time[0]) + 8}` + ":" + time[1] + ":" + time[2];
      return day + " " + time;
    }
  },
  mounted() {/* 默认运行数据刷新 */
    this.getalldkgl();
  },
  computed: { /* 计算页码数 */
    tableData() {
      return this.dkglData.slice(
        (this.nowPage - 1) * this.eachNum.replace(/[^0-9]/ig, ""),
        this.nowPage * this.eachNum.replace(/[^0-9]/ig, ""),
        (this.nowPage - 1) * this.nowNum, this.nowPage * this.nowNum);
      // return this.dkglData.slice((this.nowPage - 1) * this.nowNum, this.nowPage * this.nowNum);
    }
  },
}
</script>


